<template>
  <div class="home">
    <!-- 搜索栏 -->
    <header>
      <aside class="a1">
        <img src="@\assets\前台首页\扫一扫.png" alt="">
        <input type="text" v-model="goods" placeholder="">
        <img src="@\assets\前台首页\信息.png" alt="">
      </aside>  

      <aside class="a2">
        <ul>
          <li>推荐</li>
          <li>家电</li>
          <li>食品</li>
          <li>数码</li>
          <li>美妆</li>
          <li>配饰</li>
        </ul>
      </aside>
    </header>

    <body>
      <!-- a3轮播 -->
      <aside class="a3">
        <img src="@\assets\前台首页\1672365502_121467.jpg" alt="">
      </aside>
      <!-- a4图片 -->
      <aside class="a4">
        <ul>
         <li>
            <img src="@\assets\前台首页\签到领券.png" alt="">
         </li>
         <li>
            <img src="@\assets\前台首页\优淘超市.png" alt="">
         </li>
         <li>
            <img src="@\assets\前台首页\TOP榜单.png" alt="">
         </li>
         <li>
            <img src="@\assets\前台首页\门店到家.png" alt="">
         </li>
         <li>
            <img src="@\assets\前台首页\积分商城.png" alt="">
         </li>
        </ul>
      </aside>
      <aside class="a5">
        <div class="title">
          <p>优淘<span class="s1">头条</span></p> 
          <span class="s2">据海淘宝库关闭还有10小时，抓紧剁手啊</span>
        </div>
        <div class="box">
          <div class="box1">
              <p>品牌闪购<button>美的></button></p>
              <p class="p1">买微波炉送大米</p>
              <aside>
                <img src="@\assets\前台首页\微波炉.png" alt="">
                <img src="@\assets\前台首页\大米.png" alt="">
              </aside>
          </div>
          <div class="box1">
              <p>品牌闪购<button>美的></button></p>
              <p class="p1">买微波炉送大米</p>
              <aside>
                <img src="@\assets\前台首页\微波炉.png" alt="">
                <img src="@\assets\前台首页\大米.png" alt="">
              </aside>
          </div>
          <div  class="box1">
              <p>品牌闪购<button>美的></button></p>
              <p class="p1">买微波炉送大米</p>
              <aside>
                <img src="@\assets\前台首页\微波炉.png" alt="">
                <img src="@\assets\前台首页\大米.png" alt="">
              </aside>
          </div>
          <div class="box1">
              <p>品牌闪购<button>美的></button></p>
              <p class="p1">买微波炉送大米</p>
              <aside>
                <img src="@\assets\前台首页\微波炉.png" alt="">
                <img src="@\assets\前台首页\大米.png" alt="">
              </aside>
          </div>
        </div>
      </aside>
    </body>

  </div>
</template>

<script setup>


</script>

<style scoped>
.home{
  width: 100%;
  background-color: #FAFAFA;
}
.home header{
  background-color: #E73148;
  width:100%;
  height: 20rem;
  border-bottom-left-radius: 10rem;
  border-bottom-right-radius: 10rem;
  display: flex;
  flex-direction: column;
  position: relative;
}
.a1{
  width: 90%;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  padding-bottom: 2rem;
  padding-top: 3rem;
}
.a1 input{
  border: none;
  border-radius: 1.5rem;
  width: 75%;
}
.a1 img{
  width: 2rem;
}
.a2{
  width: 95%;
  margin: 0 auto;
}
.a2 ul{
  display: flex;
  justify-content: space-around;
}
.a2 li{
    font-size: 1.5rem;
    color: white;
    font-family: "微软雅黑";
}
.a3{
  position: absolute;
  top: 10rem;
  left: 1.4rem;
  width: 90%;
  display: flex;
  justify-content: center;
}
.a3 img{
  width: 100%;
  border-radius: 1rem;
}
.a4{
  width: 100%;
  margin-top: 5rem;
}
.a4 ul{
  width: 80%;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
}
.a4 img{
  width: 3rem;
}
.a5{
  padding-top: 2rem;
  width: 85%;
  margin: 0 auto;
}
.title{
  display: flex;
  align-items: center;
}

.a5 .title p{
  width: 40%;
  font-size: 1.6rem;
  font-weight: bolder;
}
.a5 .title p .s1{
  font-size: 1.6rem;
  font-weight: bolder;
  color: #FF5A43;
}
.a5 .title  .s2{
  font-size: 0.8rem;
  padding-left: 2rem;
  color: #AAAAAA;
}
.box{
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.box .box1{
  box-shadow: 0.1rem 0.1rem 0.8rem 0.1rem gray;
  border: none;
  width: 45%;
  margin: 0.5rem 0.5rem;
}
.box .box1 p{
  font-size: 1.5rem;
  font-weight: bolder;
  display: flex;
  align-items: center;
}
.box p button{
  margin-right: rem;
  width: 3.5rem;
  line-height: 1.5rem;
  background-color: #FF5A43;;
  color: white;
  border: none;
  border-radius: 0.2rem;
}
.box .p1{
  font-size: 1.8rem;
  color: #FF5A43;
}
</style>